<template>
  <div class="course-manage">
    <div class="select-button">
      <el-row>
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input @change="pageExam" v-model="inputExamTitle" placeholder="请输入考试名字"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" :offset="6">
          <el-button type="primary" plain @click="$router.push({ path: '/home/create/course-exam-edit' })" >添加考试</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="course-list">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column fixed prop="id" label="测试ID" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="title" label="测试标题" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="description" label="测试描述" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="username" label="创建者" min-width="40%" align="center">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" min-width="40%" align="center">
        </el-table-column>
<!--        <el-table-column prop="isPublic" label="是否开放" min-width="40%" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.isPublic == 1"-->
<!--              disabled>-->
<!--            </el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="类型" align="center" fixed="right" width="200">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{problemType[scope.row.type]}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button @click="beginEditExam(scope.row.id)" type="text" size="middle">编辑</el-button>
            <!--            <el-button type="text" size="middle">解散</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 20px;display: flex;flex-direction: row;justify-content: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 20, 40]"
          :page-size="8"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseManage",
  data() {
    return {
      inputExamTitle: '',

      currentSize:10,
      currentPage:1,
      total:0,
      tableData: [],
      problemType:["单选题","多选题","简答题"],
    }
  },
  mounted() {
    this.pageExam()
  },
  methods: {
    pageExam(){
      this.$api.pageExam({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        title: this.inputExamTitle || '',
      })
        .then((res) => {
          this.total = res.data.total
          let list = res.data.rows;
          for(let i = 0;i<list.length;i++){
            list[i].gmtCreate= this.gmtToDate(list[i].gmtCreate)
          }
          this.tableData = list
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pageExam();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pageExam();
    },
    beginEditExam(id){
      this.$router.push({ path: '/home/create/course-exam-edit/'+id })
    },





    gmtToDate(gmt) {
      let fmt = "YYYY-mm-dd HH:MM";
      let date = new Date(parseInt(gmt));
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  },
}
</script>

<style scoped>

.course-manage{
  width: 94%;
  margin-left: 3%;
}
.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.course-list {
  padding: 10px 0;
}
</style>
